<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			input[type=button] {
				margin: 5px 40px;
			}
		</style>
	</head>

	<body>
		<!--准备5张图片，将图片起名为"1.jpg","2.jpg"..."5.jpg" 
			首先显示第一图片，然后向页面添加上一张、
			下一张按钮 要求点击下一张图片，切换到下一张图片，
			如果没有上一张或下一张则显示 “已经是第一张”或“已经是最后一张”-->
		<img src="img/1.jpg" id="p1" width="300">
		<br />
		<input type="button" value="上一张" onclick="pre()" />
		<input type="button" value="下一张" onclick="next()" />

		<script>
			var i = 1;
			var next = function() {
				i++;
				if(i>=6){
					alert("最后一张");
				}else{
					p1.src="img/"+i+".jpg";
				}
			}
			var pre = function() {
				i--;
				if(i<=0){
					alert("第一张");
				}else{
					p1.src="img/"+i+".jpg";
				}
			}
		</script>
	</body>

</html>